<template>
  <div class="leftContent">
    <!-- 标题 -->
    <div class="titleStyle">
      <!-- 居中标题公用组件 -->
      <div class="title">
        <!-- 图片加标题 -->
        <img src="@/assets/image/employment/titleStyleleft.png" alt="" />
        <p>残疾人就业</p>
        <img src="@/assets/image/employment/titleStyleright.png" alt="" />
      </div>
      <!-- 描述 -->
      <p class="describe">提供 "互联网+" 就业服务</p>
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <template>
        <swiper
          ref="mySwiper"
          :options="swiperOptions"
          v-show="CategoryData.length"
        >
          <swiper-slide v-for="(item, index) in CategoryData" :key="index">
            <div
              class="industryitem"
              @click="
                $router.push(
                  item.name == '自主创业'
                    ? '/employment/hotitems'
                    : '/employment/stationDetail?id=' + item.code
                )
              "
            >
              <div class="first_cude">
                <img
                  :src="imageWebUrl + item.icon"
                  @error="$event.target.src = GLOBAL.defaultIconImg"
                  alt=""
                />
                <p class="industryTitle">{{ item.name }}</p>
                <p class="industrycont">
                  {{ item.detail }}
                </p>
                <!-- <p class="mallworks" v-show="item.exitJob == 1">查看更多职位</p> -->
              </div>
              <!-- <div class="second_cude">
                <img
                  :src="imageWebUrl + item.icon"
                  @error="$event.target.src = GLOBAL.defaultIconImg"
                  alt=""
                />
                <p class="industryTitle">{{ item.name }}</p>
                <p class="industrycont">
                  {{ item.detail }}
                </p>
                <p class="mallworks" v-show="item.exitJob == 1">查看更多职位</p>
              </div> -->
            </div>
          </swiper-slide>
          <!-- 前进后退按钮 -->
          <div
            class="swiper-button-prev swiper_btn swiper-button-white"
            slot="button-prev"
            @mouseover="changeMask(1)"
            @mouseout="changeMask(2)"
          >
            <img
              v-show="!swiperLeft"
              src="@/assets/image/employment/lefticon.png"
              alt=""
            />
            <img
              v-show="swiperLeft"
              src="@/assets/image/employment/lefticon2.png"
              alt=""
            />
          </div>
          <div
            class="swiper-button-next swiper_btn swiper-button-white"
            slot="button-next"
            @mouseover="changeMask(3)"
            @mouseout="changeMask(4)"
          >
            <img
              v-show="swiperRight"
              src="@/assets/image/employment/righticon.png"
              alt=""
            />
            <img
              v-show="!swiperRight"
              src="@/assets/image/employment/righticon2.png"
              alt=""
            />
          </div>
        </swiper>
      </template>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 80px"
        v-if="CategoryData.length < 1"
      />
    </div>
    <!-- 标签标题 -->
    <div class="navTitle">
      <p class="titleName">就业职位</p>
      <p class="titleenglish">EMPlOYMENTS</p>
    </div>
    <!-- tab -->
    <div class="tab">
      <template>
        <a-tabs
          size="large"
          :tabBarStyle="tabBarStyle"
          @change="searchEmploymentList"
        >
          <a-tab-pane
            :tab="item.name"
            v-for="item in empCategoryData"
            :key="item.code"
          >
            <ul class="workList">
              <li v-for="(empItem, index) in EmploymentData" :key="index">
                <p
                  class="workTitle"
                  @click="
                    $router.push(
                      '/employment/positionDetail?jobCode=' + empItem.jobCode
                    )
                  "
                >
                  {{ empItem.name }}
                </p>
                <div class="msg">
                  <div
                    class="welfare"
                    @click="
                      $router.push(
                        '/employment/positionDetail?jobCode=' + empItem.jobCode
                      )
                    "
                  >
                    <div class="navs">
                      <p class="maney">
                        <template v-if="empItem.payType == 1">
                          {{ empItem.minPay
                          }}<span v-show="empItem.minPay && empItem.maxPay"
                            >K-</span
                          >{{ empItem.maxPay
                          }}<span v-show="empItem.minPay && empItem.maxPay"
                            >K</span
                          >/月
                        </template>
                        <template v-else-if="empItem.payType == 2">
                          {{ empItem.maxPay }}元/日
                        </template>
                        <template v-else-if="empItem.payType == 3">
                          面议
                        </template>
                      </p>
                      <div class="nav">
                        <p>{{ empItem.degree }}</p>
                        <p class="line" v-show="empItem.degree">|</p>
                        <p>{{ empItem.workExper }}</p>
                        <p
                          class="line"
                          v-show="empItem.workExper && empItem.disaType"
                        >
                          |
                        </p>
                        <p>{{ empItem.disaType }}</p>
                      </div>
                    </div>
                    <div class="treatment" v-if="empItem.welfare">
                      <p
                        v-for="(labelItem, index) in empItem.welfare.split(
                          '、'
                        )"
                        v-show="labelItem && index < 3"
                        :key="index + 'label'"
                      >
                        {{ labelItem }}
                      </p>
                    </div>
                  </div>
                  <div
                    class="company"
                    v-if="empItem.comCode"
                    @click="
                      $router.push(
                        '/employment/detailsBusiness?id=' + empItem.comCode
                      )
                    "
                  >
                    <img
                      :src="imageWebUrl + empItem.comLogo"
                      @error="$event.target.src = GLOBAL.defaultIconImg"
                      alt=""
                      class="worklogo"
                    />
                    <div class="synopsis">
                      <p class="companyname">{{ empItem.comName }}</p>
                      <p class="synop">
                        {{ empItem.comNature }}
                        <span v-show="empItem.comNature">|</span>
                        {{ empItem.comTrade }}
                        <span v-show="empItem.comTrade && empItem.scale"
                          >|</span
                        >
                        {{ empItem.scale }}
                      </p>
                    </div>
                  </div>
                </div>
                <div
                  class="links"
                  v-if="empItem.couseList.length || empItem.webName"
                >
                  <p v-if="empItem.couseList.length">
                    相关课程：<span
                      v-for="(couseItem, index) in empItem.couseList"
                      :key="index + 'couse'"
                      @click="
                        $router.push(
                          '/video/detailsVideo?courseNo=' + couseItem.courseNo
                        )
                      "
                      >{{ couseItem.name }}</span
                    >
                  </p>
                  <p v-show="empItem.webName">
                    相关政策：<a
                      @click.stop="toRescue(empItem.webUrl)"
                      target="_blank"
                      onclick="return fasle"
                      v-if="empItem.policies == 1"
                      >{{ empItem.webName }}</a
                    >
                    <span class="policy" v-else>{{ empItem.webName }}</span>
                  </p>
                </div>
              </li>
              <a-empty
                :image="imgUrl"
                :image-style="{
                  height: '220px',
                }"
                style="margin: 80px"
                v-if="EmploymentData.length < 1 && flag"
              />
            </ul>
          </a-tab-pane>

          <div
            class="mall"
            @click="$router.push('/employment/positionList')"
            slot="tabBarExtraContent"
          >
            <p>更多</p>
            <img src="@/assets/image/employment/mall.png" alt="" />
          </div>
        </a-tabs>
      </template>
    </div>
    <!-- 标签标题 -->
    <div class="navTitle">
      <p class="titleName">名企招聘</p>
      <p class="titleenglish">RECRUITMENTS</p>
    </div>
    <!-- 轮播图 -->
    <div class="swiper-advertise">
      <template>
        <swiper
          ref="mySwipers"
          :options="swiperOptions_advertise"
          v-show="RecommedData.length"
        >
          <swiper-slide v-for="(item, index) in RecommedData" :key="index">
            <div
              class="advertiseItem"
              @click="
                $router.push('/employment/detailsBusiness?id=' + item.comCode)
              "
            >
              <img
                :src="imageWebUrl + item.logo"
                @error="$event.target.src = GLOBAL.defaultIconImg"
                alt=""
              />
              <p class="advertiseTitle">{{ item.shortName }}</p>
              <p class="advertisework">
                在招岗位<span>{{ item.recruitNum }}</span
                >个
              </p>
            </div>
          </swiper-slide>
          <!-- 前进后退按钮 -->
          <div
            v-if="RecommedData.length > 5"
            class="swiper-button-prev swiper_btn swiper-button-white"
            slot="button-prev"
            @mouseover="changeMask(5)"
            @mouseout="changeMask(6)"
            @click="swiperPrev"
          >
            <img
              v-show="!swiperworkLeft"
              src="@/assets/image/employment/lefticon.png"
              alt=""
            />
            <img
              v-show="swiperworkLeft"
              src="@/assets/image/employment/lefticon2.png"
              alt=""
            />
          </div>
          <div
            v-if="RecommedData.length > 5"
            class="swiper-button-next swiper_btn swiper-button-white"
            slot="button-next"
            @mouseover="changeMask(7)"
            @mouseout="changeMask(8)"
            @click="swiperNext"
          >
            <img
              v-show="swiperworkRight"
              src="@/assets/image/employment/righticon.png"
              alt=""
            />
            <img
              v-show="!swiperworkRight"
              src="@/assets/image/employment/righticon2.png"
              alt=""
            />
          </div>
        </swiper>
      </template>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 80px"
        v-if="RecommedData.length < 1"
      />
    </div>
    <!-- 标题 -->
    <div class="titleStyle">
      <!-- 居中标题公用组件 -->
      <div class="title">
        <!-- 图片加标题 -->
        <img src="@/assets/image/employment/titleStyleleft.png" alt="" />
        <p>残疾人创业</p>
        <img src="@/assets/image/employment/titleStyleright.png" alt="" />
      </div>
      <!-- 描述 -->
      <p class="describe">助力残疾人士创业成功</p>
    </div>
    <!-- 残疾人创业 -->
    <ul class="pioneering" v-if="BusinessData.length">
      <li
        class="chuang"
        v-for="(item, index) in BusinessData"
        :key="index + 'sasa'"
        @click="$router.push('/employment/projectDetail?id=' + item.itemNo)"
      >
        <div class="img">
          <img
            :src="imageWebUrl + item.photo"
            @error="$event.target.src = GLOBAL.defaultCover"
            alt=""
          />
        </div>
        <ul class="navs">
          <!-- <li v-for="i in item.labels" :key="i + 'saa'">{{ i }}</li> -->
        </ul>
        <p class="changtitle">{{ item.itemName }}</p>
        <p class="chuangcontent">
          {{ item.itemTrait }}
        </p>
        <p class="chuangview">{{ item.consultNumber }}人已了解</p>
      </li>

      <div
        class="mall"
        v-show="BusinessData.length == 2"
        @click="$router.push('/employment/projectList')"
      >
        <!-- <img src="@/assets/image/employment/mallIcon.png" alt="" /> -->
        <div class="img"></div>
        <!-- <a-icon type="profile" /> -->
        <p>更多项目</p>
      </div>
    </ul>
    <a-empty
      :image="imgUrl"
      :image-style="{
        height: '220px',
      }"
      style="margin: 80px"
      v-if="BusinessData.length < 1"
    />
    <!-- 标题 -->
    <div class="titleStyle">
      <!-- 居中标题公用组件 -->
      <div class="title">
        <!-- 图片加标题 -->
        <img src="@/assets/image/employment/titleStyleleft.png" alt="" />
        <p>创就业政策</p>
        <img src="@/assets/image/employment/titleStyleright.png" alt="" />
      </div>
      <!-- 描述 -->
      <p class="describe">为残疾人速递最新的资讯政策</p>
    </div>
    <div class="msg_tabs">
      <template>
        <!-- <a-tabs size="large" :tabBarStyle="tabBarStyle" @change="searchMsgList">
          <a-tab-pane
            :key="item.msgType"
            :tab="item.title"
            v-for="(item, index) in msgCategoryData"
          >


          </a-tab-pane>
          <a-button
            slot="tabBarExtraContent"
            @click="$router.push('/employment/messageList')"
          >
            更多<a-icon type="right" />
          </a-button>
        </a-tabs> -->
        <div style="margin-top: 30px">
          <ul class="messageList" v-if="InformationData.length">
            <li
              class="listDiv"
              v-for="(msgItem, index) in InformationData"
              :key="index + 'msg'"
              @click="goDetail(msgItem.newsNo, '政策')"
            >
              <div class="leftimg" v-if="msgItem.cover">
                <img
                  :src="imageWebUrl + msgItem.cover"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                  class="leftimg"
                />
              </div>
              <div class="rightCont">
                <span class="messTitle">{{ msgItem.title }}</span>
                <div class="navmsg">
                  <p>发布：{{ msgItem.publishTime }}</p>
                  <p>阅读量：{{ msgItem.browseNum }}</p>
                  <p>来源：{{ msgItem.source }}</p>
                </div>
                <span class="content">{{ msgItem.intro }}</span>
              </div>
            </li>
          </ul>
        </div>
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 80px"
          v-if="InformationData.length < 1"
        />
        <!-- 结束 -->
        <div class="cnBottom" v-if="InformationData.length > 1">
          <div style="margin: 0 auto; width: 230px">
            <a-button v-if="btnState == 1" @click="more()" class="sobtn"
              >点击加载更多</a-button
            >
            <span
              class="timeTxt1"
              style="text-align: center"
              v-if="btnState == 3"
              >没有更多了</span
            >
            <a-button v-if="btnState == 2" :loading="true" class="sobtn"
              >加载中</a-button
            >
          </div>
        </div>
      </template>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
import {
  apiCategoryList,
  apiEmploymentList,
  apiRecommedList,
  apiBusinessList,
  apiInformationList,
} from "@/api/employment";
export default {
  data() {
    return {
      pageIndex: 1,
      flag: false,
      btnState: 1,
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      CategoryData: [], // 残疾人就业分类
      empCategoryData: [
        // 就业职位分类
        // { title: "IT/互联网", trade: "01" },
        // { title: "金融/保险", trade: "02" },
        // { title: "消费零售/贸易/交通物流", trade: "03" },
        // { title: "娱乐传媒", trade: "04" },
      ],
      EmploymentData: [], // 就业职位
      RecommedData: [], // 名企招聘
      BusinessData: [], // 残疾人创业
      InformationData: [], // 信息库
      msgCategoryData: [
        // 信息库分类
        { title: "政策法规", msgType: "01" },
        { title: "资讯", msgType: "02" },
        { title: "技能提升", msgType: "03" },
        { title: "常见问题", msgType: "04" },
      ],
      swiperLeft: false,
      swiperRight: false,
      swiperworkLeft: false,
      swiperworkRight: false,
      tabBarStyle: {
        width: "800px",
        marginLeft: "20px",
      },
      swiperOptions: {
        slidesPerView: 3,
        centeredSlides: true,
        centeredSlidesBounds: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          disabledClass: "my-button-disabled",
        },
        // Some Swiper option/callback...
      },
      trade: "",
      swiperOptions_advertise: {
        slidesPerView: 5,
        centeredSlides: true,
        centeredSlidesBounds: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          disabledClass: "my-button-disabled",
        },
        // Some Swiper option/callback...
      },
      onLoading: false,
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    // console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(3, 1000, false);
    this.getCategoryList(); // 获取残疾人就业分类列表
    this.getHeatList();
    // this.getEmploymentList('01') // 获取就业职位列表
    this.getRecommedList(); // 获取名企招聘列表
    this.getBusinessList(); // 获取残疾人创业列表
    this.getInformationList("01"); // 获取信息库列表
  },
  methods: {
    swiperNext() {
      this.$refs.mySwipers.$swiper.slideNext();
    },
    swiperPrev() {
      this.$refs.mySwipers.$swiper.slidePrev();
    },
    // 跳转详情页
    goDetail(id, type) {
      this.$router.push("/details/details?id=" + id + "&from=4&type=" + type);
    },
    changeMask(e) {
      if (e == 1) {
        this.swiperLeft = true;
      } else if (e == 2) {
        this.swiperLeft = false;
      } else if (e == 3) {
        this.swiperRight = true;
      } else if (e == 4) {
        this.swiperRight = false;
      } else if (e == 5) {
        this.swiperworkLeft = true;
      } else if (e == 6) {
        this.swiperworkLeft = false;
      } else if (e == 7) {
        this.swiperworkRight = true;
      } else if (e == 8) {
        this.swiperworkRight = false;
      }
    },
    // 获取就业行业码表
    getHeatList() {
      this.onLoading = true;
      this.$ajax({
        url: "news/industry/list/heat",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.empCategoryData = res.data;
          this.getEmploymentList(res.data[0].code);
        } else {
          this.onLoading = false;
        }
      });
    },
    // 获取残疾人就业分类列表
    async getCategoryList() {
      const res = await apiCategoryList();
      if (res.data.length) {
        this.CategoryData = res.data;
      }
    },

    // 相关政策外链跳转
    toRescue(url) {
      window.open(url, "_blank");
    },
    // 根据分类查询
    searchEmploymentList(trade) {
      this.flag = false;
      this.EmploymentData = [];
      this.getEmploymentList(trade);
    },
    // 获取就业职位列表
    async getEmploymentList(trade) {
      const res = await apiEmploymentList({ trade });
      if (res.data.length) {
        this.flag = true;
        this.EmploymentData = res.data;
      } else {
        this.flag = true;
        this.EmploymentData = [];
      }
    },

    // 获取名企招聘列表
    async getRecommedList() {
      let comType = 1; //  1.企业  2.机构
      let pageIndex = 1;
      let pageSize = 100;
      const res = await apiRecommedList({ comType, pageSize, pageIndex });
      if (res.data.totalCount > 0) {
        this.RecommedData = res.data.list;
      } else {
        this.RecommedData = [];
      }
    },

    // 获取残疾人创业列表
    async getBusinessList() {
      let pageIndex = 1;
      let pageSize = 2;
      const res = await apiBusinessList({ pageSize, pageIndex });
      if (res.data.list.length > 0) {
        this.BusinessData = res.data.list;
      } else {
        this.BusinessData = [];
      }
    },

    // 根据分类查询信息库
    searchMsgList(msgType) {
      this.getInformationList(msgType);
    },
    // 获取信息库列表
    async getInformationList(msgType) {
      let ber = [];
      // const res = await apiInformationList({ msgType });
      this.$ajax({
        url:
          "/news/msginfo/list/msg?msgType=XXK01&pageSize=" +
          10 +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          ber = res.data.list;
          for (var i in ber) {
            this.InformationData.push(ber[i]);
          }
          // 判断当前页码是否小于配置页码
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.InformationData = [];
        }
      });
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.getInformationList();
    },
  },
};
</script>

<style scoped lang="less">
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  font-weight: 600;
  border: 0;
  text-shadow: 0 !important;
}
/deep/.ant-tabs-tab {
  font-size: 16px;
}
// /deep/.ant-btn {
//   height: 48px;
// }
.navTitle {
  margin-left: 16px;
}
/deep/.ant-btn > .anticon + span,
.ant-btn > span + .anticon {
  margin-left: 4px;
}
.swiper_btn {
  width: 20px;
  height: 20px;
  background-size: 0 0;
}
/deep/.swiper-button-prev {
  position: absolute;
  left: -14px;
  img {
    width: 26px;
    height: 44px;
    position: relative;
    left: 25px;
  }
}
/deep/.swiper-button-next {
  position: absolute;
  right: -14px;
  img {
    width: 26px;
    height: 44px;
    position: relative;
    // right: 25px;
  }
}
/deep/.swiper > .swiper-slide {
  width: 257px !important;
  margin-right: 13px;
}
.industryitem:hover {
  // -webkit-transform: rotateX(90deg);
  // transform: rotateX(90deg);
  // @-webkit-keyframes rotate-vert-center {
  //   0% {
  //     -webkit-transform: rotateY(0);
  //     transform: rotateY(0);
  //   }
  //   100% {
  //     -webkit-transform: rotateY(-180deg);
  //     transform: rotateY(-180deg);
  //   }
  // }
  // @keyframes rotate-vert-center {
  //   0% {
  //     -webkit-transform: rotateY(0);
  //     transform: rotateY(0);
  //   }
  //   100% {
  //     -webkit-transform: rotateY(-180deg);
  //     transform: rotateY(-180deg);
  //   }
  // }
  .first_cude {
    padding-top: 0;
    img {
      -webkit-animation: rotate-vert-center 0.8s
        cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      animation: rotate-vert-center 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
        both;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 0.8s;
      transition: all 0.8s;
    }
    .industrycont {
      height: 200px;
      -webkit-line-clamp: 7;
    }
  }
  // img {
  //   -webkit-animation: rotate-vert-center 0.8s
  //     cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  //   animation: rotate-vert-center 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
  //     both;
  //   -webkit-transform-style: preserve-3d;
  //   transform-style: preserve-3d;
  //   -webkit-transition: -webkit-transform 0.8s;
  //   transition: all 0.8s linear;
  // }
}
.industryitem {
  cursor: pointer;
  width: 257px !important;
  height: 320px;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  // padding-top: 36px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  .first_cude {
    padding-top: 36px;
    -webkit-transform: translateZ(141px);
    transform: translateZ(141px);
    height: 100%;
    box-shadow: 0 0 20px 5px #f4f4f4;
    position: relative;
    transition: all 0.8s;
    img {
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .second_cude {
    height: 100%;
    margin-top: -2px;
    -webkit-transform: rotateX(-90deg) translateZ(-141px);
    transform: rotateX(-90deg) translateZ(-141px);
    box-shadow: 0 0 20px 5px #f4f4f4;
    position: relative;
    img {
      border-radius: 50%;
      overflow: hidden;
      height: 88px;
      padding: 0;
      transition: 0.8s;
    }
    .industryTitle {
      margin-top: 0px;
    }
    .industrycont {
      margin-top: 10px;
      -webkit-line-clamp: 8;
    }
  }
  img {
    width: 88px;
    height: 88px;
    display: block;
    margin: 0 auto;
    border: none;
    transition: 0.8s;
    vertical-align: bottom;
  }
  .industryTitle {
    margin-top: 10px;
    color: #333333;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    font-weight: 600;

    font-weight: bold;
  }
  .industrycont {
    height: 78px;
    padding: 0 19px;
    margin-top: 15px;
    color: #666666;
    font-size: 14px;
    line-height: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    transition: all 0.8s;
    transition: height 0.3s;
  }
  .mallworks {
    color: #ffbe37;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    bottom: 24px;
    left: 89px;
  }
}
.advertiseItem {
  cursor: pointer;
  width: 128px !important;
  height: 176px;
  margin: 0 auto;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
  padding: 16px 0 16px 24px;
  img {
    width: 80px;
    height: 80px;
  }
  .advertiseTitle {
    margin-top: 8px;
    color: #333333;
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .advertisework {
    margin-top: 8px;
    color: #666666;
    font-size: 13px;
    line-height: 18px;
    span {
      color: #ffbe37;
    }
  }
}
// .swiper-slide:first-child {
//    margin-left: 5px;
// }
.my-button-disabled {
  opacity: 0;
}
// .swiper {
/deep/.swiper-container {
  width: 840px;
  padding: 0 20px;
  height: 320px;
  overflow: initial;
}
// }
.leftContent {
  padding-top: 45px;
  padding-bottom: 50px;
  position: relative;
  .swiper {
    height: 393px;
    padding-top: 40px;
    margin-bottom: 50px;
  }
  .swiper-advertise {
    margin-top: 30px;
    min-height: 176px;
    margin-bottom: 130px;
    .swiper-container {
      width: 840px;
      // padding: 0 20px;
      height: 176px;
      overflow: hidden;
      //     .swiper-slide{
      //         width: 127px!important;
      //         margin: 20px;
      //     }
      //     .swiper-slide:first-child{
      //         // margin-right: 0;
      //     }
    }
  }
  .tab {
    margin-bottom: 34px;
    margin-top: 8px;
  }
  .workList {
    min-height: 300px;
    li {
      width: 800px;
      // height: 206px;
      padding: 30px 20px 15px;
      margin: 0 auto;
      margin-bottom: 16px;
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
      .workTitle {
        color: #333333;
        font-size: 18px;
        line-height: 25px;
        font-weight: bold;
        cursor: pointer;
      }
      .msg {
        margin-top: 16px;
        display: flex;
        padding-bottom: 21px;
        .welfare {
          cursor: pointer;
          width: 450px;
          .navs {
            height: 25px;
            display: flex;
            align-items: center;
            .maney {
              color: #ffbe37;
              font-size: 18px;
              line-height: 25px;
              font-weight: 600;
            }
            .nav {
              display: flex;
              margin-left: 24px;
              p {
                color: #666666;
                font-size: 13px;
                line-height: 17px;
              }
              .line {
                margin: 0 10px;
              }
            }
          }
          .treatment {
            display: flex;
            margin-top: 16px;
            p {
              padding: 0 15px;
              color: #ffbe37;
              font-size: 12px;
              line-height: 22px;
              text-align: center;
              // background: #FFE9D9;
              border-radius: 4px;
              border: 1px solid #ffbe37;
              margin-right: 16px;
              // cursor: pointer;
            }
          }
        }
        .company {
          cursor: pointer;
          flex: 1;
          display: flex;
          .worklogo {
            width: 60px;
            height: 60px;
          }
          .synopsis {
            margin-left: 19px;
            padding-top: 3px;
            .companyname {
              color: #000000;
              font-size: 14px;
              line-height: 18px;
            }
            .synop {
              margin-top: 10px;
              color: #999999;
              font-size: 12px;
              line-height: 17px;
            }
          }
        }
      }
      .links {
        display: flex;
        padding-top: 16px;
        border-top: 1px solid #eeeeee;
        p {
          margin-right: 40px;
          color: #333333;
          font-size: 14px;
          line-height: 17px;
          span {
            cursor: pointer;
            display: inline-block;
            margin-left: 8px;
            color: #0d4fae;
            text-decoration: underline;
          }
          a {
            color: #0d4fae;
            text-decoration: underline;
          }
          .policy {
            text-decoration: none;
            color: #333333;
          }
        }
      }
    }
  }
  .pioneering {
    padding: 30px 20px 130px;
    display: flex;
    justify-content: space-between;
    .chuang {
      cursor: pointer;
      width: 354px;
      height: 369px;
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
      .img {
        width: 100%;
        height: 200px;
        overflow: hidden;
      }
      img {
        width: 100%;
        transition: transform 0.5s linear;
      }
      .img:hover {
        img {
          transform: scale(1.1);
        }
      }
      .navs {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        // background: #000000;
        opacity: 0.6;
        position: relative;
        top: -38px;
        padding-left: 16px;
        li {
          width: 79px;
          height: 23px;
          color: #fff;
          margin-right: 23px;
          border: 1px solid #ffffff;
          // border-radius: 11.5px;
          text-align: center;
          line-height: 21px;
        }
      }
      .changtitle {
        margin-top: -14px;
        margin-left: 24px;
        color: #333333;
        font-size: 18px;
        line-height: 25px;
        font-weight: bold;
      }
      .chuangcontent {
        width: 310px;
        height: 54px;
        margin: 0 auto;
        margin-top: 8px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #666666;
        font-size: 15px;
        line-height: 18px;
      }
      .chuangview {
        margin-top: 16px;
        margin-left: 24px;
        color: #ffbe37;
        font-size: 13px;
        line-height: 18px;
      }
    }
    .mall {
      width: 60px;
      height: 369px;
      box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
      text-align: center;
      color: #666666;
      font-size: 12px;
      line-height: 18px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      .img {
        width: 15px;
        height: 18px;
        background-image: url("~@/assets/image/employment/mallIcon.png");
        background-size: 100% 100%;
        margin-top: 164px;
      }
      p {
        margin-top: 6px;
      }
    }
    .mall:hover {
      background-color: #ffbe37;
      p {
        font-weight: bold;
        color: #333333;
      }
      .img {
        background-image: url("~@/assets/image/mallxiangm.png");
      }
    }
  }
  .msg_tabs {
    .messageList {
      overflow: hidden;
      li {
        cursor: pointer;
        display: block;
        display: flex;
        padding: 27px 24px;
        // margin: 27px 24px 27px 24px;
        border-bottom: 1px solid #eeeeee;
        .leftimg {
          width: 196px;
          height: 120px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            transition: transform 0.5s linear;
          }
        }
        .leftimg:hover {
          img {
            transform: scale(1.1);
          }
        }
        .rightCont {
          width: 100%;
          padding: 0 18px 0 32px;
          .messTitle {
            width: 100%;
            display: block;
            color: #333333;
            font-size: 18px;
            line-height: 25px;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-family: "PingFang SC;";
          }
          .navmsg {
            margin-top: 8px;
            display: flex;
            p {
              margin-right: 56px;
              color: #666666;
              font-size: 13px;
              line-height: 18px;
              font-family: "PingFang SC;";
            }
          }
          .content {
            margin-top: 16px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: #000000;
            font-size: 15px;
            line-height: 21px;
            font-family: "PingFang SC;";
          }
        }
      }
      li:last-child {
        border: 0;
        margin-bottom: 0;
      }
    }
  }
}

//

/deep/p {
  font-family: PingFang SC !important;
}
</style>
